<template>
  <div style="padding: 1rem">
    <!-- 上方菜单 -->
    <div class="main">
      <!-- 查询表单 -->
      <div>
        <ElForm :inline="true">
          <ElFormItem>
            <ElInput v-model="queryInfo.tname" placeholder="分类名称模糊查询"></ElInput>
          </ElFormItem>
          <ElFormItem>
            <ElButtonGroup>
              <ElButton type="danger" @click="reset">重置</ElButton>
              <ElButton type="primary" @click="requery">查询</ElButton>
            </ElButtonGroup>
          </ElFormItem>
          <ElFormItem>
            <ElButton type="warning" @click="avisible = true">添加</ElButton>
          </ElFormItem>
        </ElForm>
      </div>
    </div>
    <!-- 数据呈现部分 -->
    <div>
      <ElTable :data="list">
        <ElTableColumn label="分类名称" prop="tname"></ElTableColumn>
        <ElTableColumn label="分类简介" prop="intro"></ElTableColumn>
        <ElTableColumn label="操作">
          <template #default="scope">
            <ElButton size="small" type="danger" @click="del(scope.row)">删除</ElButton>
            <ElButton size="small" type="success" @click="showModify(scope.row)">修改</ElButton>
          </template>
        </ElTableColumn>
      </ElTable>

      <PageComp :page="page" @page-change="query"></PageComp>
    </div>
  </div>

  <!-- 添加的对话框 -->
  <ElDialog title="添加信息" v-model="avisible" @open="resetAdd" @close="requery">
    <div>
      <ElFormItem>
        <ElInput v-model="addInfo.tname" placeholder="分类名称"></ElInput>
      </ElFormItem>
      <ElFormItem>
        <ElInput v-model="addInfo.intro" placeholder="分类简介" type="textarea" rows="3"></ElInput>
      </ElFormItem>
      <ElButton @click="resetAdd" type="danger">重置</ElButton>
      <ElButton type="primary" @click="add">添加</ElButton>
    </div>
  </ElDialog>

  <!-- 修改的对话框 -->
  <ElDialog title="修改信息" v-model="mvisible" @close="requery">
    <div>
      <ElFormItem>
        <ElInput v-model="modifyInfo.tname" placeholder="分类名称"></ElInput>
      </ElFormItem>
      <ElFormItem>
        <ElInput v-model="modifyInfo.intro" placeholder="分类简介" type="textarea" rows="3"></ElInput>
      </ElFormItem>
      <ElButton type="primary" @click="modify">保存</ElButton>
    </div>
  </ElDialog>
</template>

<script lang="ts" setup>
import { ElButton, ElButtonGroup, ElDialog, ElForm, ElFormItem, ElInput, ElMessage, ElMessageBox, ElTable, ElTableColumn } from 'element-plus'
import { ref } from 'vue'
import { TbSoftwareType } from '../../ts/types/CRUD'
import { BaseDataResult, BasePageVO, BaseResult, PageBean } from '../../ts/types/BaseResult'
import { ApiService } from '../../ts/ApiService'
import PageComp from '../../components/PageComp.vue'
import Tools from '../../ts/Tools'

// #region 查询
const list = ref([] as Array<TbSoftwareType>)
const page = ref({ pageNumber: 1, pageSize: 10 } as PageBean)

const queryInfo = ref({
  tname: '',
})

const reset = () => {
  queryInfo.value.tname = ''
  requery()
}

const requery = () => {
  page.value.pageNumber = 1
  query()
}

const query = () => {
  ApiService.get(`/crud/softwaretype/${page.value.pageSize}/${page.value.pageNumber}`, Tools.concatJson(queryInfo.value), (resp: BaseDataResult<BasePageVO<Array<TbSoftwareType>>>) => {
    if (resp.success) {
      list.value = resp.data.data
      page.value = resp.data.pageBean
    } else {
      ElMessage.error(resp.message)
    }
  })
}

query()
// #endregion

// #region 添加
const addInfo = ref({} as TbSoftwareType)
const avisible = ref(false)

const resetAdd = () => {
  addInfo.value = {} as TbSoftwareType
}

const add = () => {
  avisible.value = true
  ApiService.post('/crud/softwaretype', addInfo.value, (resp: BaseResult) => {
    resp.success ? ElMessage.success(resp.message) : ElMessage.error(resp.message)
  })
}
// #endregion

// #region 修改
const modifyInfo = ref({} as TbSoftwareType)
const mvisible = ref(false)

const showModify = (info: TbSoftwareType) => {
  ApiService.get(`/crud/softwaretype/${info.stid}`, {}, (resp: BaseDataResult<TbSoftwareType>) => {
    if (resp.success) {
      modifyInfo.value = resp.data
      mvisible.value = true
    } else {
      ElMessage.error(resp.message)
    }
  })
}

const modify = () => {
  ApiService.put('/crud/softwaretype', modifyInfo.value, (resp: BaseResult) => {
    resp.success ? ElMessage.success(resp.message) : ElMessage.error(resp.message)
  })
}

// #endregion

// #region 删除
const del = (info: TbSoftwareType) => {
  ElMessageBox.confirm(`是否删除：${info.tname}`).then(() => {
    ApiService.delete(`/crud/softwaretype/${info.stid}`, {}, (resp: BaseResult) => {
      resp.success ? ElMessage.success(resp.message) : ElMessage.error(resp.message)
      requery()
    })
  })
}
// #endregion
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  justify-content: flex-end;
}
.pre_info {
  font-size: 13px;
  white-space: pre-wrap; //文本换行
  word-wrap: break-word; //英文换行
}
</style>
